<template>
    <div>
        <el-row>
            <el-col :span="7" class="pos-order" id="order-list">
                <!--左侧栏-->
                <el-tabs type="border-card">
                    <el-tab-pane label="点餐" class="postcls">
                        <el-table :data="tableData" border style="width: 100%;" stripe>
                            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                            <el-table-column prop="count" label="数量" width="60"></el-table-column>
                            <el-table-column prop="price" label="单价" width="70"></el-table-column>
                            <el-table-column label="操作" width="100" fixed="right">
                                <template scope="scope">
                                    <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除
                                    </el-button>
                                    <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="totalDiv">
                            <small>数量：</small>
                            {{ totalCount }} &nbsp;&nbsp;&nbsp;&nbsp;
                            <small>金额：</small>
                            {{ totalMoney }}元
                        </div>
                        <div class="over-btn" style="margin-left: 50px">
                            <el-button type="warning">挂单</el-button>
                            <el-button type="danger" @click="delAllGoods">删除</el-button>
                            <el-button type="success" @click="checkout">结账</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="挂单">
                        挂单
                    </el-tab-pane>
                    <el-tab-pane label="外卖">
                        外卖
                    </el-tab-pane>
                </el-tabs>

            </el-col>
            <el-col :span="17">
                <div class="often-goods">
                    <p class="title">常用商品</p>
                    <div class="often-goods-list">
                        <ul>
                            <li v-for="(item,i) in oftenGoods" :key="item.goodsId" @click="addOrderList(item)"
                                style="cursor: pointer">
                                <span>{{ item.goodsName }}</span>
                                <span class="often-price">￥ {{ item.price }}元</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="goods-type">
                    <el-tabs>
                        <el-tab-pane label="汉堡">
                            <div>
                                <ul class="cook-list">
                                    <li v-for="item in typeGoods" :key="item.goodsId" @click="addOrderList(item)">
                                        <span class="food-img">
                                            <img src="../../images/汉堡.jpg">
                                            <!--<img :src="item.goodsImg">-->
                                        </span>
                                        <div class="goods-content">
                                            <p class="food-name">{{ item.goodsName }}</p>
                                            <p class="food-price">￥{{ item.price }}元</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="小食">
                            <div>
                                <ul class="cook-list">
                                    <li v-for="item in typeGoods2" :key="item.goodsId" @click="addOrderList(item)">
                                        <span class="food-img">
                                            <img src="../../images/汉堡.jpg">
                                            <!--<img :src="item.goodsImg">-->
                                        </span>
                                        <div class="goods-content">
                                            <p class="food-name">{{ item.goodsName }}</p>
                                            <p class="food-price">￥{{ item.price }}元</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="饮料">
                            <div>
                                <ul class="cook-list">
                                    <li v-for="item in typeGoods3" :key="item.goodsId" @click="addOrderList(item)">
                                        <span class="food-img">
                                            <img src="../../images/汉堡.jpg">
                                            <!--<img :src="item.goodsImg">-->
                                        </span>
                                        <div class="goods-content">
                                            <p class="food-name">{{ item.goodsName }}</p>
                                            <p class="food-price">￥{{ item.price }}元</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="套餐">
                            <div>
                                <ul class="cook-list">
                                    <li v-for="item in typeGoods4" :key="item.goodsId" @click="addOrderList(item)">
                                        <span class="food-img">
                                            <img src="../../images/汉堡.jpg">
                                            <!--<img :src="item.goodsImg">-->
                                        </span>
                                        <div class="goods-content">
                                            <p class="food-name">{{ item.goodsName }}</p>
                                            <p class="food-price">￥{{ item.price }}元</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
    // 引入axios
    import axios from "axios"

    export default {
        name: "pos",
        mounted() {
            var orderHeight = document.body.clientHeight;
            // console.log(orderHeight);
            document.getElementById("order-list").style.height = orderHeight + "px"
        },
        data: function () {
            return {
                // 左侧数据
                tableData: [],
                // 右侧上部数据
                oftenGoods: [],
                // 右侧下部数据
                // 汉堡
                typeGoods: [],
                // 小食
                typeGoods2: [],
                // 饮料
                typeGoods3: [],
                // 套餐
                typeGoods4: [],
                // 总金额
                totalMoney: 0,
                // 总数量
                totalCount: 0,
            }
        },
        methods: {
            // 点击商品添加进订单
            addOrderList(goods) {
                this.totalMoney = this.totalCount = 0;

                // 判断商品是否存在于订单列表中

                // 假设现在订单列表中没有该商品
                let isHave = false;
                // for (let i = 0; i < this.tableData.length; i++) {
                //     if (this.tableData[i].goodsId === goods.goodsId) {
                //         // 若存在，说明列表中有
                //         isHave = true
                //     }
                // }
                this.tableData.forEach(item => {
                    if (item.goodsId === goods.goodsId) {
                        isHave = true
                    }
                });

                // 根据判断的结果 书写业务逻辑
                if (isHave) {
                    // 改变列表中商品数量
                    // 筛选，若是id对应，则使数量+1
                    let arr = this.tableData.filter(a => a.goodsId === goods.goodsId);
                    arr[0].count++
                } else {
                    // 若是没有，则拼接一个对象，加入数组
                    let newGoods = {
                        goodsId: goods.goodsId,
                        goodsName: goods.goodsName,
                        price: goods.price,
                        count: 1
                    };
                    this.tableData.push(newGoods)
                }

                // 计算总金额和数量
                this.getTotalMoney();
            },
            // 删除单个商品
            delSingleGoods(goods) {
                this.tableData = this.tableData.filter(a => a.goodsId != goods.goodsId);
                // 计算总金额和数量
                this.getTotalMoney();
            },
            // 删除所有商品
            delAllGoods() {
                this.tableData = []
                this.totalMoney = this.totalCount = 0
            },
            // 结账
            checkout() {
                if (this.totalCount != 0) {
                    this.tableData=[]
                    this.totalCount = this.totalMoney = 0
                    this.$message({
                        message:"结账成功，祝您用餐愉快",
                        type:"success"
                    })
                }else {
                    this.$message.error("请选择您需要的食物")
                }
            },
            // 计算金额和数量
            getTotalMoney() {
                this.totalMoney = this.totalCount = 0;
                if (this.tableData) {
                    // 计算总金额和数量
                    this.tableData.forEach(item => {
                        this.totalCount += item.count;
                        this.totalMoney = this.totalMoney + (item.price * item.count)
                    })
                }
            },
        },
        created() {
            // 常用商品
            axios.get("https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods").then(res => {
                // console.log(res.data);
                if (res.status === 200) {
                    this.oftenGoods = res.data
                }
            }).catch(err => {
                console.log(err);
                alert("网络错误，请刷新")
            })

            axios.get("https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods").then(res => {
                // console.log(res.data);
                if (res.status === 200) {
                    // 汉堡
                    this.typeGoods = res.data[0];
                    // 小食
                    this.typeGoods2 = res.data[1];
                    // 饮料
                    this.typeGoods3 = res.data[2];
                    // 套餐
                    this.typeGoods4 = res.data[3]
                }
            }).catch(err => {
                console.log(err);
                alert("网络错误，请刷新重试")
            })
        },
    }
</script>

<style scoped lang="less">
    .pos-order {
        background-color: #f9fafc;
        border-right: 1px solid #c0ccda;
        height: 100%;
    }

    .postcls {
        /*position: relative;*/

        .over-btn {
            margin-top: 10px;
        }
    }

    .el-tabs--border-card {
        box-shadow: none;
        height: 100%;
    }

    .often-goods {
        .title {
            height: 40px;
            border-bottom: 1px solid #d3dce6;
            background-color: #f9fafc;
            padding: 10px;
        }

        .often-goods-list {
            overflow: hidden;

            ul {
                overflow: hidden;
                padding: 10px;

                li {
                    list-style: none;
                    float: left;
                    border: 1px solid #e5e9f2;
                    padding: 10px;
                    margin: 10px;
                    background-color: #fff;

                    .often-price {
                        color: #58b7ff;
                    }
                }
            }
        }


    }

    .goods-type {
        clear: both;
        padding: 10px;
    }

    .cook-list li {
        list-style: none;
        width: 23%;
        border: 1px solid #E5E9F2;
        height: auto;
        overflow: hidden;
        background-color: #fff;
        float: left;
        margin: 2px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        cursor: pointer;
    }

    .cookList li span {
        display: block;
        float: left;
    }

    .cookList .goods-content {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .food-img {
        width: 35%;

        img {
            width: 80px;
            margin-top: 5px;
            margin-left: 5px;
        }
    }

    .food-name {
        font-size: 18px;
        padding-left: 10px;
        color: brown;
    }

    .food-price {
        font-size: 16px;
        padding-left: 10px;
        padding-top: 10px;
    }

    .totalDiv {
        background-color: #fff;
        padding: 10px;
        border-bottom: 1px solid #d3dce6;
    }
</style>